<template>
  <nav>
    <ul>
      <li
        v-for="item in navItems"
        :key="item.index"
        @click="activeIndex = item.index"
        :class="{ active: item.index == activeIndex }"
      >
        <a href="#">{{ item.name }}</a>
      </li>
    </ul>
  </nav>
</template>

<script lang="ts">
import { ref } from "vue";

export default {
  props: {
    navItems: Array,
  },
  setup() {
    const activeIndex = ref(0);

    return {
      activeIndex,
    };
  },
};
</script>

<style lang="scss" scoped>
nav {
  height: 100%;
  font-size: 1.175rem;
  line-height: 46px;
  ul {
    padding: 0;
    margin: 0;
    height: 100%;
    color: rgb(102, 102, 102);
    list-style: none;
    li {
      cursor: pointer;
      height: 100%;
      margin-left: 1.2em;
      padding: 0 12px;
      float: left;
      a {
        color: inherit;
        text-decoration: none;
      }
    }
    li:hover {
      background: rgba(128, 128, 128, 0.342);
    }
    .active {
      color: #000;
      border-bottom: 2px solid rgba(24, 131, 231, 0.452);
    }
  }
}
</style>